<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.min.js"></script>
    <script src="homework(1).js"></script>
    <script src="goodList.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            width: 100vw;
            height: 100vh;
            position: relative;
            background-repeat: no-repeat;
            background-image: linear-gradient(309deg, #00f2ff, #288efe, #5fc0d0, #5d76ff, #275ffe, #00f2ff);
            width: 100%;
            -webkit-animation: AnimationName 27s ease infinite;
            -moz-animation: AnimationName 27s ease infinite;
            -o-animation: AnimationName 27s ease infinite;
            -ms-animation: AnimationName 27s ease infinite;
            animation: AnimationName 27s ease infinite;

        }

        #color {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            top: 50vh;

        }

        #text {
            border-radius: 20px;
            height: 40px;
            width: 300px;
        }

        #goods-list {
            border-radius: 5px;
            box-shadow: 0 0 5px skyblue;
            width: 23vw;
            overflow-y: scroll;
            position: relative;
            left: 0;
            height: 75vw;
        }

        #goods-list::-webkit-scrollbar {
            width: 10px;
            height: 10px;
            /**/
        }

        .show-list {
            line-height: 25px;
            margin: 0 auto;
            color: darkgray;
            text-decoration: 'none';
            overflow: hidden;
            white-space: nowrap;
    
        }

        #code {
            border-radius: 50%;
            width: 3vw;
        }
    </style>
</head>

<body>
    <div id="App">
        <div id="color">
            <!-- <div :style="{'color:'del,'width:'w,'height:' h,}"></div> -->
            <input id="text" :type="flag?'text':'password'" :style="{display: blo}">
            <!-- <input type="checkbox" v-model="flag"> -->
            <img src="下载.jpg" :style="{display: blo,width: w}" alt="" @click="onClick" v-model="flag">
        </div>
        <!-- </div> -->
        <div :id="good">
            <ul v-for="item in homeWorkData">


                <li :class="show"> <img id="code" :src="item.albumpic" alt=""> <a href="">{{item.name}}</a></li>
                <!-- <li v-for="index in item">{{index}}</li>   -->
                <!-- v-for="item.data.list.album" -->
                <!-- <li v-for="data in item">a{{data.total}}</li> -->
            </ul>
        </div>
    </div>
</body>
<script>

    var App = new Vue({
        el: '#App',
        data: {
            flag: false,
            del: "#eeee",
            w: '40px',
            good: 'goods-list',
            blo: 'block',
            homeWorkData: homeWorkData.data.list,
            data: 'data',
            goodList: goodList,
            show: 'show-list'
        },
        methods: {
            onClick: function () {
                App.flag = !App.flag
                console.log(!App.flag);
                console.log(App.homeWorkData);

            }
        }

    })

</script>

</html>